<template>
    <div class="am-form-group">
        <button class="am-btn am-margin-left-sm" @click="showCategory" type="button">选择产品分类</button>
        <div class="offcanvas am-cf" :class="isShowCategory?'show-menu':''">
            <div class="tab-main am-fl">
                <div class="tab-search">
                    <div class="input-search">
                        <a class="am-icon-search"></a>
                        <input type="text" placeholder="搜索" autocomplete="off">
                    </div>
                </div>
                <div class="tab-nav am-fl">
                    <pull ref="orderPull" @onpull="handleOrderPull" :count="orderCount">
                        <ul class="am-padding-0">
                            <template v-for="(item,index) in productShowList">
                                <li :class="productShowChildren==item.children?'active':''" @click="productShowChildren=item.children">
                                    <img :src="item.icon" />
                                    <span>{{item.text}}</span>
                                </li>
                            </template>
                        </ul>
                    </pull>
                </div>
                <div class="tab-list am-fl">
                    <ul class="list p-list">
                        <li class="am-cf" v-for="sub in productShowChildren" @click="sub.Checked=!sub.Checked;">
                            <div class="am-fl chk">
                                <Checkbox :key="sub.id" v-model="sub.Checked"></Checkbox>
                            </div>
                            <div class="am-fl">
                                <p class="am-text-truncate">{{sub.spec}} {{sub.remark}}</p>
                                <p class="sub"> {{sub.price}}元(参:{{sub.referencePrice}})/余:{{sub.amount}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-close am-fl" @click="closeTab">
                <span>
                    点击此处关闭<i class="am-text-center am-icon-chevron-circle-left"></i>
                </span>
            </div>
        </div>
        <form-item :label="item.parentName + item.text" class="order-list" v-for="(item,index) in checkedProduct">
            <div class="am-cf am-u-sm-12">
                <div class="am-u-sm-3 am-padding-left-0">
                    <input type="hidden" :name="'ParentId'+index" :value="item.parentId" />
                    <input type="hidden" :name="'Id'+index" :value="item.id" />
                    <input type="number" :name="'Price'+index" v-model="item.price" step="0.01" placeholder="价格" />
                </div>
                <div class="am-u-sm-3">
                    <input type="number" :name="'Amount'+index" v-model="item.amount" placeholder="数量" />
                </div>
                <div class="am-u-sm-3 am-padding-right-0">
                    <input type="text" :name="'Discount'+index" v-model="item.discount" placeholder="折扣" />
                </div>
                <div class="am-u-sm-3 am-padding-right-0">
                    <input type="text" v-model="item.dealPrice" placeholder="成交价" />
                </div>
            </div>
        </form-item>
        <form-item class="am-cf am-text-right am-padding-bottom-xl" v-if="checkedProduct.length>0">
            <strong class="am-padding-bottom-xl">订单合计：{{totalPrice}}元</strong>
        </form-item>
    </div>
</template>
<script>
    import pull from 'components/pull';
    import { getDatas } from 'api/erp';
    
    export default {
        name: 'product',
        components: { pull },
        props: {
            isEdit: {
                type: Boolean,
                default:false
            }
        },
        data() {
            return {
                keyword: '',
                page: 0,
                isShowCategory:false,
                productShowList:[],
                checkedProduct:[],
                orderCount:0,
                productShowChildren:[]
            }
        },
        computed:{
            totalPrice(){
                var t = 0;
                for(var i = 0; i < this.checkedProduct.length; i++){
                    var item = this.checkedProduct[i];
                    t = t + (item.price * item.amount) * item.discount;
                }
                return t.toFixed(2);
            }
        },
        watch:{
            orderKeyword(val){
                this.hanldeOrderSearch();
            }
        },
        methods: {
            showCategory(){
                this.isShowCategory = true;
                if(this.checkedProduct.length==0){
                    this.handleOrderPull()
                }
            },
            async loadOrderData(page, cb) {
                try {
                    let result = await getDatas('ordercategory', page, this.orderKeyword);
                    console.log("Result:" + result);
                    if (result.succ) {
                        if (page > 0)
                            this.productShowList = this.productShowList.concat(result.data.datas);
                        else
                            this.productShowList = result.data.datas;
                        if(page == 0)
                            this.productShowChildren = this.productShowList[0].children;
                        if (cb) cb(result.data.haveMore);
                        this.orderCount = result.data.count;
                    } else {
                        if (cb) cb(true);
                        this.orderCount = 0;
                        this.$Message.error(result.data);
                    }

                } catch (error) {
                    console.log(error)
                }
            },
            handleSelectPro(){
                this.getChecked();
            },
            handleOrderPull(config){
                if (!config) {
                    let self = this;
                    config = {page:this.$refs.orderPull.page, cb:function(haveMore) {
                        self.$refs.orderPull.loadMore = haveMore;
                    }};
                }
                this.loadOrderData(config.page, config.cb);
            },
            hanldeOrderSearch() {
                if (this.$orderTimer) {
                    clearTimeout(this.$orderTimer);
                    this.$orderTimer = null;
                }
                let self = this;
                this.$orderTimer = setTimeout(function() {
                    self.$orderTimer = null;
                    self.handleOrderPull();
                },500);
            },
            getChecked(){
                if(this.isShowCategory)
                    this.isShowCategory = false;
                this.checkedProduct = [];
                var self = this;
                var list = this.productShowList;
                console.log("list:", list);
                list.forEach((item) =>{
                    var children = item.children.filter(a => a.Checked);
                    console.log("children:", children.length);
                    children.forEach((sub) => {
                        console.log("sub:" + sub.id);
                        if(this.isEdit){
                            var order = self.item.Products.filter(a => a.ProductId == sub.id)[0];
                            console.log("order:" + order);
                            sub.price = order.Price;
                            sub.amount = order.Amount;
                            sub.remark = order.Remark;
                            sub.discount = order.Discount;
                        }
                        self.checkedProduct.push(sub);
                    });
                });
                console.log("selected product:", this.checkedProduct.length);
                setTimeout(function(){
                    $('.page').scrollTop($('.page').height() - 400); 
                },100);
            },
            async getProducts(ids){
                let result = await getProductTree(ids);
                this.productShowList = result;
                console.log("edit:"+result);
                this.getChecked();
            },
            closeTab(){
                this.isShowCategory=false;
                this.getChecked();
            }
        },
        async created() {
            this.handleOrderPull();
        }
    }
</script>
